<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Alliance Colleges - AceHub</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/header.css">
    <link rel="stylesheet" href="css/media.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <link rel="shortcut icon" href="../header-footer/images/ico.jpg" type="image/x-icon">
    <link rel="stylesheet" href="../header-footer/common.css">
    <style>
        .league-container {
max-width: 1200px;
margin: 0 auto;
padding: 40px 20px;
}
.page-header {
text-align: center;
margin-bottom: 50px;
}
.page-header h1 {
font-size: 2.5rem;
color: #2c3e50;
margin-bottom: 15px;
}
.page-header .subtitle {
font-size: 1.2rem;
color: #7f8c8d;
max-width: 600px;
margin: 0 auto;
line-height: 1.6;
}
.league-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 30px;
margin-bottom: 60px;
}
.stat-card {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 30px;
border-radius: 15px;
text-align: center;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
transition: transform 0.3s ease;
}
.stat-card:hover {
transform: translateY(-5px);
}
.stat-number {
font-size: 2.5rem;
font-weight: bold;
margin-bottom: 10px;
}
.stat-label {
font-size: 1.1rem;
opacity: 0.9;
}
.universities-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
margin-bottom: 60px;
}
.university-card {
background: white;
border-radius: 15px;
padding: 30px;
box-shadow: 0 5px 20px rgba(0,0,0,0.1);
transition: all 0.3s ease;
border: 1px solid #f0f0f0;
}
.university-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(0,0,0,0.15);
}
.university-logo {
width: 100px;
height: 100px;
background: #f8f9fa;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
font-size: 2rem;
color: #667eea;
}
.university-logo img {
width: 100%;
height: 100%;
object-fit: cover; /*Automatically crop and fill containers*/
border-radius: 50%; /*The image itself is also circular*/
}
.university-name {
font-size: 1.3rem;
font-weight: bold;
color: #2c3e50;
text-align: center;
margin-bottom: 10px;
}
.university-type {
color: #7f8c8d;
text-align: center;
margin-bottom: 15px;
}
.university-courses {
/* background: #f8f9fa;  */
/* padding: 15px;  */
border-radius: 10px;
margin-bottom: 15px;
}
.university-courses h4 {
text-align: center;
margin: 0 0 10px 0;
color: #2c3e50;
font-size: 0.9rem;
}
.course-tags {
display: flex;
justify-content: space-evenly; /*The spacing between each label is equal, and the left and right blank spaces are consistent*/
align-items: center;
gap: 0; /*Can be set to 0, allowing space even to fully control the spacing*/
}
.course-tag {
/* background: #667eea;  */
color: rgb(54, 84, 234);
padding: 4px 12px;
border-radius: 20px;
font-size: 0.8rem;
}
.course-tag:hover {
/* background: #667eea;  */
color: rgb(104, 126, 237);
}
.join-section {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 60px 40px;
border-radius: 20px;
text-align: center;
margin-top: 60px;
}
.join-section h2 {
font-size: 2rem;
margin-bottom: 20px;
}
.join-section p {
font-size: 1.1rem;
margin-bottom: 30px;
opacity: 0.9;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.cta-buttons {
display: flex;
gap: 20px;
justify-content: center;
flex-wrap: wrap;
}
.btn {
padding: 15px 30px;
border-radius: 50px;
text-decoration: none;
font-weight: bold;
transition: all 0.3s ease;
border: 2px solid transparent;
}
.btn-primary {
background: white;
color: #667eea;
}
.btn-outline {
background: transparent;
color: white;
border-color: white;
}
.btn:hover {
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}
@media (max-width: 768px) {
.page-header h1 {
font-size: 2rem;
}
.league-stats {
grid-template-columns: repeat(2, 1fr);
}
.universities-grid {
grid-template-columns: 1fr;
}
.join-section {
padding: 40px 20px;
}
.cta-buttons {
flex-direction: column;
align-items: center;
}
}
    </style>
</head>

<body>
    <!-- 页眉 -->
    <header class="navbar">
        <div class="nav">
            <div class="logo">
                <a href="WebsiteHomepage.html"><img src="../header-footer/images/logo.jpg" alt="AceHub"></a>
            </div>
            <nav>
                <ul>
                    <li><a href="WebsiteHomepage.html">home page</a></li>
                    <li><a href="courseList.html">course</a></li>
                    <li><a href="league.html" class="active">Alliance colleges</a></li>
                    <li><a href="about-us.html">About Us</a></li>
                </ul>
            </nav>
        </div>
        <div class="search-box">
            <input type="text" id="searchInput" placeholder="Search for ">
            <button type="button" id="searchButton"><i class="fas fa-search"></i></button>
        </div>
        <div class="info">
            <!-- 用户信息将由JavaScript动态加载 -->
        </div>
    </header>

    <main>
        <div class="league-container">
            <!-- 页面标题 -->
            <div class="page-header">
                <h1>AceHub</h1>
                <p class="subtitle">
                    AceHub brings together outstanding educational institutions from across the country to jointly build a high-quality online education ecosystem,
Provide learners with rich and diverse high-quality course resources.
                </p>
            </div>

            <!-- 数据统计 -->
            <div class="league-stats">
                <div class="stat-card">
                    <div class="stat-number">68</div>
                    <div class="stat-label">Alliance colleges</div>
                </div>
                <div class="stat-card">
                    <div class="stat-number">1200+</div>
                    <div class="stat-label">quality curriculum</div>
                </div>
                <div class="stat-card">
                    <div class="stat-number">500000 yuan+</div>
                    <div class="stat-label">Online students</div>
                </div>
                <div class="stat-card">
                    <div class="stat-number">98%</div>
                    <div class="stat-label">Satisfaction evaluation</div>
                </div>
            </div>

            <!-- 院校列表 -->
            <div class="universities-grid">
                <div class="university-card">
                    <div class="university-logo">
                         <img src="images/tsinghua.png" alt="清华大学 Logo">
                    </div>
                    <h3 class="university-name">Tsinghua University</h3>
                    <p class="university-type">985  |   211 </p>
                    <div class="university-courses">
                        <h4>Advantage courses</h4>
                        <div class="course-tags">
                            <span class="course-tag">Computer Science</span>
                            <span class="course-tag">artificial intelligence</span>
                            <span class="course-tag">engineering management</span>
                        </div>
                    </div>
                </div>

                <div class="university-card">
                     <div class="university-logo">
                         <img src="images/pking.png" alt="北京大学 Logo">
                    </div>
                    <h3 class="university-name">Peking University</h3>
                    <p class="university-type">985  |   211 </p>
                    <div class="university-courses">
                        <h4>Advantage courses</h4>
                        <div class="course-tags">
                            <span class="course-tag">Philosophy, History, Culture</span>
                            <span class="course-tag">economic management</span>
                            <span class="course-tag">Literature and Art</span>
                        </div>
                    </div>
                </div>

                <div class="university-card">
                     <div class="university-logo">
                         <img src="images/szu.png" alt="深圳大学 Logo">
                    </div>
                    <h3 class="university-name">Shenzhen University</h3>
                    <p class="university-type">Comprehensive university</p>
                    <div class="university-courses">
                        <h4>Advantage courses</h4>
                        <div class="course-tags">
                            <span class="course-tag">computer graphics</span>
                            <span class="course-tag">large model</span>
                            <span class="course-tag">photoelectricity</span>
                        </div>
                    </div>
                </div>

                
            </div>

            <!-- 加入联盟 -->
            <div class="join-section">
                <h2>Join AceHub</h2>
                <p>
                    We sincerely invite more outstanding educational institutions to join AceHub and work together to promote the development of online education,
Provide more abundant and high-quality educational resources for learners.
                </p>
                <div class="cta-buttons">
                    <a href="../account/register.html" class="btn btn-primary">Apply to join AceHub</a>
                    <a href="about-us.html" class="btn btn-outline">Learn more</a>
                </div>
            </div>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="footer">
        <div class="footer-content">
            <div class="footer-logo">
                <a href="WebsiteHomepage.html"><img src="../header-footer/images/logo.jpg" alt="AceHub"></a>
            </div>
            <div class="footer-text">
                <nav class="footer-nav">
                    <ul>
                        <li><a href="about.html">About Us</a></li>
                        <li><a href="contact.html">Contact Us</a></li>
                        <li><a href="privacy.html">Privacy Policy</a></li>
                        <li><a href="terms.html">Term of service</a></li>
                    </ul>
                </nav>
                <div class="footer-info">
                    <p>&copy; 2025 AceHub reserves all rights</p>
                </div>
            </div>
        </div>
    </footer>

    <script src="../database.js"></script>
    <script src="../account/account.js"></script>
    <script src="../header-footer/navigation.js"></script>

    <!-- 页眉用户信息加载脚本 -->
    <script>
        window.onload = function () {
const userid = localStorage.getItem('token');
if (userid) {
const user = JSON.parse(localStorage.getItem(userid));
let profileUrl = '';
let profileName = '';
let accountUrl = '';
if (userid === 'admin') {
profileUrl = '../account/admin-profile.html';
ProfileName='Personal Center';
accountUrl = '../account/admin-profile.html';
} else if (userid === 'teacher') {
profileUrl = '../teacher/teacher-profile.html';
ProfileName='Personal Center';
accountUrl = '../account/teacher-setting.html';
} else {
profileUrl = '../student/student-profile.html';
ProfileName='My Learning';
accountUrl = '../account/student-setting.html';
}
document.querySelector('.info').innerHTML = `
                    <a href="${profileUrl}">
                        <img id="user-head" src="${user.avatar}" alt="用户头像"></a>
                    <div class="card">
                        <ul>
                            <li><a href="${profileUrl}">${profileName}</a></li>
                            <li><a href="${accountUrl}">Account Settings </a></li>
                            <li><a id="logout" href="#logout">Log Out</a></li>
                        </ul>
                    </div>
                `;
                document.getElementById('logout').addEventListener('click', () => {
                    localStorage.removeItem('token');
                    window.location.href = 'WebsiteHomepage.html';
                });
            } else {
                document.querySelector('.info').innerHTML = `
                    <a href="../account/login.html"><button class="login">log on</button></a>
                    <a href="../account/register.html"><button class="register">register</button></a>
                `;
            }
        }
    </script>
</body>

</html> 